<template>
  <XtxDialog :title="`${formData.id?'编辑':'添加'}我的尺码`" v-model:visible="dialogVisible">
    <div class="size-content">
      <div class="pic">
        <img src="../../../../assets/images/size.png" alt="">
      </div>
      <div class="form">
        <div class="form-item">
          <span class="label">姓名：</span>
          <input type="text" v-model="formData.name" placeholder="收货人姓名">
        </div>
        <div class="form-item">
          <span class="label">性别：</span>
          <xtxSelect
          v-model="formData.gender"
          :options="[
          { value: '男', label: '男' },
          { value: '女', label: '女' },
          { value: '未知', label: '未知' }
          ]">
          </xtxSelect>
        </div>
        <div class="form-item2">
          <span class="label">身高(cm)：</span>
          <input v-model="formData.height" type="text">
        </div>
        <div class="form-item2">
          <span class="label">体重(kg)：</span>
          <input v-model="formData.bodyWeight" type="text">
        </div>
        <div class="form-item2">
          <span class="label">肩宽(cm)：</span>
          <input v-model="formData.shoulderWidth" type="text">
        </div>
        <div class="form-item2">
          <span class="label">胸围(cm)：</span>
          <input v-model="formData.chestCircumference" type="text">
        </div>
        <div class="form-item2">
          <span class="label">腰围(cm)：</span>
          <input v-model="formData.waistCircumference" type="text">
        </div>
        <div class="form-item2">
          <span class="label">臀围(cm)：</span>
          <input v-model="formData.hips" type="text">
        </div>
        <div class="form-item2">
          <span class="label">脚长(cm)：</span>
          <input v-model="formData.footSize" type="text">
        </div>
        <div class="form-item2">
          <span class="label">脚围(cm)：</span>
          <input v-model="formData.footCircumference" type="text">
        </div>
        <div class="form-item" style="width: 120px">
          <span class="label">设为默认：</span>
          <XtxCheckbox v-model="formData.isDefault" />
        </div>
      </div>
    </div>
    <template v-slot:footer>
      <XtxButton @click="dialogVisible=false" type="gray" style="margin-right:20px">取消</XtxButton>
      <XtxButton @click="submit()" type="primary">确认</XtxButton>
    </template>
  </XtxDialog>
</template>

<script>
import { reactive, ref } from 'vue'
import xtxSelect from '@/components/library/xtx-select.vue'
import { addSize, updateSize } from '@/api/personal'
import Message from '@/components/library/message'
export default {
  components: { xtxSelect },
  name: 'SizeEdit',
  setup (props, { emit }) {
    const dialogVisible = ref(false)
    // 定义一个open函数，作为打开对话框函数(组件实例拥有open函数)
    const open = (size) => {
      dialogVisible.value = true
      // 如果是编辑，先需要向表单中填充需要修改的原始数据
      if (size.id) {
        for (const key in size) {
          formData[key] = size[key]
          formData.isDefault = formData.isDefault === 0
        }
      } else {
        // 如果添加 清空表单 遍历表单对象，如果找到key值对应的isDefault就设置值为1
        for (const key in formData) {
          if (key === 'isDefault') {
            formData[key] = false
          } else {
            formData[key] = null
          }
        }
      }
    }
    // 定义表单数据对象
    const formData = reactive({
      name: null, // 角色名称
      gender: null, // 性别
      height: null, // 身高
      bodyWeight: null, // 体重
      shoulderWidth: null, // 肩宽
      chestCircumference: null, // 胸围
      waistCircumference: null, // 腰围
      hips: null, // 臀围
      footSize: null, // 脚长
      footCircumference: null, // 脚围
      isDefault: false, // 0为是，1为否
      id: null
    })
    // 添加（修改）完成后提交操作
    const submit = () => {
      formData.isDefault = (formData.isDefault) ? 0 : 1
      if (formData.id) {
        // 修改我的尺码请求
        updateSize(formData).then(data => {
          dialogVisible.value = false
          // 修改成功
          Message({ type: 'success', text: '修改尺码成功' })
          emit('on-success', formData)
        })
      } else {
        if (formData.name === null) {
          Message({ type: 'warn', text: '请创建一个尺码角色' })
        } else {
          addSize(formData).then(data => {
            formData.id = data.result.id
            Message({ type: 'success', text: '添加尺码成功' })
            // 关闭对话框
            dialogVisible.value = false
            emit('on-success', formData)
          })
        }
      }
    }
    return { dialogVisible, open, formData, submit }
  }
}
</script>

<style lang="less" scoped>
.xtx-dialog {
  :deep(.wrapper){
    width: 940px;
    .body {
      font-size: 14px;
    }
  }
}
.size-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-around;
  // 左侧图片区
  .pic {
    width: 320px;
    height: 500px;
  }
  // 右侧内容区
  .form {
    width: 400px;
    height: 500px;
    display: flex;
    flex-wrap: wrap;
    input {
      border: 1px solid #e4e4e4;
      padding-left: 10px;
    }
    .form-item {
      width: 100%;
      display: flex;
      line-height: 50px;
      justify-content: space-between;
      .label {
        width: 100px;
        text-align: right;
        padding-right: 10px;
        color: #999;
      }
      input {
        width: 300px;
        height: 50px;
      }
    }
    .form-item2 {
      width: 50%;
      display: flex;
      line-height: 32px;
      .label {
        width: 100px;
        text-align: right;
        padding-right: 10px;
        color: #999;
      }
      input {
        width: 100px;
        height: 32px;
      }
    }
  }
}
</style>
